<template>
  <!--查看询价单-->
  <div class="show-quotation-index module-index">
    <breadcrumb-title :title="title"/>
    <div class="show-quotation-body module-body">
      <!--    查看询价单-->
      <div class="showQuotation-body-title">
        <div class="body-item-body">
        <span>
          &nbsp;&nbsp;
          <span style="color: red">*</span>
          订单号：
          <span v-text="orderNumber"></span>
          <span style="margin-left: 20px;color: red" v-if="status === -1">被驳回</span>
        </span>
        </div>
      </div>

      <!--      步骤条-->
      <steps class="steps-index" :status="status" v-if="!audit && status !== -1" :map="map"/>

      <!--    运输地址-->
      <transport-address ref="transport-address" :info="data.address"/>
      <!--    计划时间-->
      <planed-time ref="planed-time" :info="data.planedTime"/>
      <!--    获取信息-->
      <load-information ref="load-information" :if-show="ifShow" :info="data.loadInfo"/>
      <!--      备注-->
      <remarks ref="remarks" :info="data.remarks"/>

      <!--      审核意见-->
      <div class="opinion-index"  v-if="audit || status === 2" >
        <order-module-title title="审核意见"/>
        <div class="opinion-body">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="data.opinion"
              maxlength="255"
              show-word-limit
          >
          </el-input>
        </div>
      </div>

<!--      承运商报价-->
      <order-module-title v-if="identity === 'client' && status === 6" class="margin-border" title="司机报价"/>
      <div v-if="identity === 'client' && status === 6" class="driver-transport-body">
        <el-table :data="carriersData" stripe>
          <el-table-column property="name" label="司机姓名" width="150"></el-table-column>
          <el-table-column property="quality" label="车辆性质" width="100"></el-table-column>
          <el-table-column property="plateLicense" label="车牌号" width="120"></el-table-column>
          <el-table-column property="unitFee" label="单价" width="110"></el-table-column>
          <el-table-column property="models" label="车型" width="100"></el-table-column>
          <el-table-column property="specification" label="车辆规格" width="100"></el-table-column>
          <el-table-column property="maxLoad" label="载量(T)" width="120"></el-table-column>
          <el-table-column property="origin" label="发站" width="100"></el-table-column>
          <el-table-column property="destination" label="到站" width="100"></el-table-column>
          <el-table-column property="mileage" label="总里程" width="100"></el-table-column>
          <el-table-column property="freight" label="运费合计(￥)" width="100"></el-table-column>
          <el-table-column property="otherFees" label="其他费用(￥)" width="100"></el-table-column>
          <el-table-column property="validEndTime" label="报价有效截止期" width="160"></el-table-column>
          <el-table-column property="totalFees" label="总费用(￥)" width="100"></el-table-column>
        </el-table>
      </div>

      <div class="submit">
        <el-button v-if="status !== 1" disabled>已审核</el-button>
        <el-button v-if="identity === 'client' && status === 6 && createOrder"
                   @click="clientQuote">下定单</el-button>
        <el-button v-if="audit && status === 1" @click="auditPass">通过</el-button>
        <el-button v-if="audit && status === 1" @click="auditRefuse">驳回</el-button>
        <el-button @click="cancel">取消</el-button>
        <el-button @click="reload">刷新</el-button>
      </div>

    </div>

  </div>
</template>

<script>
import BreadcrumbTitle from "@/components/title/BreadcrumbTitle";
import {orderGetByOrderNUmber, quotationStatusUpdate, quotationAuditOpinion} from "@/apis/order";
import {orderGetOrderStatusMap} from "@/apis/order";
import Steps from "@/components/order/component/Steps";
import TransportAddress from "@/components/order/component/TransportAddress";
import PlanedTime from "@/components/order/component/PlanedTime";
import LoadInformation from "@/components/order/component/LoadInformation";
import Remarks from "@/components/order/component/Remarks";
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";
import {carriersQuoteGetById, clientOrderCreate} from "@/apis/user";

export default {
  name: "ShowQuotation",
  components: {
    BreadcrumbTitle,
    Steps,
    TransportAddress,
    PlanedTime,
    LoadInformation,
    Remarks,
    OrderModuleTitle,

  },
  props: {},
  data() {
    return {
      carriersData: [],
      carriersDataRadioId: '1',
      ifShow: false,
      createOrder: false,
      title: '',
      orderNumber: '',
      audit: false,
      identity: '',
      status: 1,
      map: [],
      data: {}
    }
  },
  created() {
    this.init()
  },
  methods: {

    async init() {
      this.identity = localStorage.getItem("identity")
      this.title = this.$route.meta.title
      this.status = this.$route.query.status
      this.orderNumber = this.$route.query.orderNumber
      if (this.$route.query.audit) {this.audit = true}
      if (this.$route.query.createOrder){this.createOrder = true}
      // 获取询价单信息 根据订单号
      this.quotationGetById(this.orderNumber)
      // 获取订单状态进度
      orderGetOrderStatusMap(this.orderNumber).then(resp => {
        if (resp?.data?.code === 1) {
          this.map = resp?.data?.data?.list
          this.status = resp?.data?.data?.status
        } else {
          this.$message.error(resp?.data?.msg)
        }
      })

      // 根据订单号获取报价
      if(this.identity === 'client' && this.status === 6 ){
        carriersQuoteGetById(this.orderNumber).then(resp => {
          if(resp?.data?.code === 1){
            this.carriersData = this.resp?.data?.data
          }else{this.$message.error(resp?.data?.msg)}
        })
      }

    },
    // 客户下订单
    clientQuote(){
      clientOrderCreate({data:this.data,quote:this.carriersData}).then(resp => {
        if(resp?.data?.code === 1){
          console.log(resp)
        }else{this.$message.error(resp?.data?.msg)}
      })


    },
    // 审核通过
    auditPass() {
      // 修改订单审核意见
      quotationAuditOpinion(this.orderNumber, this.data.opinion).then(resp => {
        if (resp?.data?.code === 1) {
          // 审核通过
          quotationStatusUpdate(this.orderNumber, 2).then(resp => {
            if (resp?.data?.code === 1) {
              this.$message.success("审核通过")
              this.$router.push({name: 'quotation'})
            } else {
              this.$message.error(resp?.data?.msg)
            }
          })
        } else {this.$message.error(resp?.data?.msg)}
      })


    },
    // 审核不通过
    auditRefuse() {
      quotationStatusUpdate(this.orderNumber, -1).then(resp => {
        if (resp?.data?.code === 1) {
          this.$message.success("审核成功")
          this.$router.push({name: 'quotation'})
        } else {
          this.$message.error(resp?.data?.msg)
        }
      })
    },
    // 获取询价单信息 根据订单号
    quotationGetById(orderNumber) {
      orderGetByOrderNUmber(orderNumber).then(resp => {
        if (resp?.data?.code === 1) {
          this.data = resp?.data?.data
        } else {
          this.$message.error(resp?.data?.msg)
        }
      })

    },
    // 返回
    cancel() {
      const item = localStorage.getItem("identity");
      if (item === 'client') {
        this.$router.push({name: 'quotationManage'})
      } else if (item === 'carriers') {
        this.$router.push({name: 'quotation'})
      }

    },
    // 刷新数据
    reload() {
      this.quotationGetById(this.orderNumber)
    },

  }
}
</script>

<style scoped lang="scss">

.show-quotation-index {

  .show-quotation-body {

    .showQuotation-body-title {
      width: 100%;
      height: 100px;
      border-bottom: 1px black solid;

      .body-item-body {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }

      .body-item-title {
        padding-left: 4px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-color: #B3C0D1;
      }
    }

    .submit {
      margin: 20px 0;
    }

    .steps-index {
      width: 50%;
    }
  }

}



.opinion-index{
  margin-top: 10px;
}


.opinion-body{
  margin-top: 10px;
  width: 80%;
  border: 1px black solid;
  border-radius: 5px;
}

</style>